.graphic-card {
  position: relative;
  width: 100%;
  // margin-top: 30rpx;
  padding: 30rpx;

  /* 简要信息 start */
  .brief-info {
    display: flex;
    align-items: center;

    /* 简要内容 start */
    &__content {
      flex-grow: 1;
      display: flex;
    }

    &__avatar {
      flex-shrink: 0;
      width: 90rpx;
      height: 90rpx;
      border-radius: 50%;
      background-color: var(--tn-color-gray--disabled);

      .image {
        width: 100%;
        height: 100%;
        border-radius: inherit;
      }

      .circles-image {
        width: 100%;
        height: 100%;
        border-radius: 12rpx;
      }
    }

    &__data {
      flex-grow: 1;
      margin-left: 24rpx;
      color: var(--tn-text-color-primary);
      line-height: 1;
      align-items: center;

      .title {
        display: flex;
        align-items: center;
        padding-top: 6rpx;
        font-size: 30rpx;
        color: #333;
      }

      .user-level-img {
        width: 30px;
        height: 14px;
        margin-left: 6px;
      }

      .desc {
        display: flex;
        align-items: center;
        margin-top: 20rpx;
        color: #999;
        font-size: 22rpx;

        .username {
          margin: 0rpx 5rpx;
          font-size: 25rpx;
          color: #5f7e8b;

          .user-release {
            font-size: 20rpx;
          }
        }
      }
    }

    /* 简要内容 end */

    /* 操作按钮 start */
    &__operation {
      flex-grow: 0;

      &--more {
        font-size: 40rpx;
        font-weight: bold;
        color: var(--tn-color-gray-disabled);
        padding-left: 20rpx;
      }
    }

    /* 操作按钮 end */
  }

  /* 简要信息 end */

  /* 内容 start */
  .container {
    margin-top: 20rpx;
  }

  .content {

    /* 内容标签 start */
    &__tags {
      display: flex;
      float: left;
      align-items: center;
      color: #007BFF;

      .tag-item {
        width: fit-content;
        height: fit-content;
        margin-right: 18rpx;
        line-height: 1.8em;
      }
    }

    /* 内容标签 end */

    /* 标题数据 start */
    &__title {
      font-size: 30rpx;
      line-height: 1.8em;
      font-weight: bold;
      // 文字两端对齐
      text-align: justify;
    }

    /* 标题数据 end */

    /* 内容数据 start */
    &__data {
      font-size: 30rpx;
      line-height: 1.8em;
      // display: inline-block;
      color: #333;
      // 文字两端对齐
      text-align: justify;
    }

    /* 内容数据 end */
  }

  /* 图片列表 start */
  .images {
    width: 100%;
    margin-top: 20rpx;

    /* 一张图片 start */
    .images-one {
      width: 70%;
      height: 300rpx;
      border-radius: 15rpx;
    }

    /* 一张图片 end */

    /* 两张图片 start */
    .images-two {
      width: 80%;
    }

    /* 两张图片 end */

    /* 三张图片 start */
    .images-three {
      position: relative;
      width: 100%;
      height: 332rpx;
      display: flex;
      align-items: center;

      /* 左边单图 start */
      .image-wrapper-left {
        position: relative;
        width: 50%;
        height: 100%;

        .image-container {
          width: 100%;
          height: 100%;
          border-radius: 15rpx;
        }
      }

      /* 左边单图 end */
      /* 右边双图 start */
      .image-wrapper-right {
        position: relative;
        flex: 1;
        height: 100%;
        margin-left: 28rpx;
        display: flex;
        flex-direction: column;
        align-items: center;

        .image-container {
          flex: 1;
          width: 100%;
          border-radius: 15rpx;

          &+.image-container {
            margin-top: 28rpx;
          }
        }
      }

      /* 右边双图 end */
    }

    /* 三张图片 end */

    /* 四张图片 start */
    .images-four {
      width: 80%;
    }

    /* 四张图片 end */
  }

  /* 图片列表 end */

  /* 视频 start */
  .video {
    margin: 30rpx 0;
    border-radius: 10rpx;
    /* 确保容器占据全屏 */
    position: sticky;
    width: 100%;
    height: 400rpx;

    /* 使用视口高度 */
    // overflow: hidden; /* 隐藏超出容器的部分 */
    .full-screen-video {
      /* 使视频充满容器 */
      width: 100%;
      height: 100%;
      object-fit: fill;
      /* 确保视频内容填满整个容器，可能会有部分变形 */
    }
  }

  .content-video {
    height: 400rpx;
    width: 100%;
    padding: 10rpx 0 30rpx 0;
    border-radius: 15rpx;
    overflow: hidden;

    .video-icon {
      position: absolute;
      z-index: 99;
      position: absolute;
      left: 45%;
      margin: 126rpx 0 0 0;
      font-size: 80rpx;
    }

    .video-data {
      width: 100%;
      height: 100%;
      border-radius: inherit;
    }
  }

  /* 视频 end */

  /* 语音 start */
  .audio {
    position: relative;
    margin: 30rpx 0;
  }

  /* 语音 end */

  /* 链接 start */
  .link {
    margin: 30rpx 0;
  }

  /* 链接 end */

  /* 内容 end */

  /* 底部信息 start */
  .location-info {
    display: flex;
    margin-top: 22rpx;

    .location-name {
      margin-left: 6rpx;
      color: var(--tn-color-grey-dark);
      font-size: 22rpx;
    }

    .custom-button-class {
      color: var(--tn-text-color-primary);
      border-radius: 50rpx 50rpx 0rpx 50rpx !important;
      padding: 6rpx 10rpx;
    }
  }

  .bottom-money {
    margin-top: 30rpx;
    color: red;
    font-size: 36rpx;
    font-weight: bold;
  }

  .bottom-organize_bureau {
    margin-top: 30rpx;
    display: flex;
    flex-wrap: wrap;

    .list-item {
      width: 20%;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 30rpx;
      border-radius: 8rpx;

      .item-image {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
      }

      .item-title {
        font-size: 22rpx;
        margin-top: 14rpx;
      }
    }
  }

  .bottom-info {
    display: flex;
    align-items: center;
   
    margin-top: 22rpx;

    /* 左边查看数据 start */
    &__left {
      display: flex;
      align-items: center;

      .money {
        color: red;
        font-size: 36rpx;
        font-weight: bold;
      }

      .desc {
        // font-size: 24rpx;
        color: var(--tn-color-gray);
      }

      /* 标签 start*/
      .tag-circles {
        display: inline-block;
        border-radius: 24rpx;
        height: 48rpx;
        background-color: #F3FFE9;
        border: 2rpx solid #6FA644;

        display: flex;
        align-items: center;

        /* 圈子头像 start */
        .circles-image {
          width: 16rpx;
          height: 16rpx;
          position: relative;
          background-size: cover;
          background-position: center;
          border-radius: 6rpx 0 0 6rpx;
        }

        .circles-pic {
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center;
          // overflow: hidden;
          padding: 0 0 0 16rpx;
        }

        .circles-name {
          padding: 0 16rpx 0 6rpx;
          font-size: 24rpx;
          color: #6FA644;
        }
      }

      /* 标签 end*/

    }

    /* 左边查看数据 end */

    /* 右边数据 start */
    &__right {
      display: flex;
      align-items: center;
      color: var(--tn-color-grey);

      .count-item-data {
        display: flex;
        align-items: center;
        margin-left: 26rpx;

        .count {
          margin-left: 6rpx;
        }
      }
    }

    /* 右边数据 end */
  }

  /* 底部信息 end */
}

/* 间隔 start */
.interval {
  margin: 50rpx 0;
}

/* 间隔 start */

.operate-item-container {
  position: relative;
  width: fit-content;
  margin-bottom: 15rpx;
  display: flex;
  flex-wrap: nowrap;

  .scroll-item {
    margin-right: 40rpx;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f8f7f8;

    .icon {
      background-color: var(--tn-color-white);
      width: 90rpx;
      height: 90rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 15%;
    }

    .title {
      margin-top: 15rpx;
      font-size: 22rpx;
      color: var(--tn-color-gray-dark);
    }
  }
}